/* 商品管理-智科 */
<template>
  <div class="app-containers">
    <query-table-render
        ref="queryTable"
        :query-model="queryModel"
        :table-request="requestTableData"
        :table-column="tableColumns"
        :toolbar-render="toolbarRnd"
        :transform-query="transformQuery"
        :title-render="titleRender"
        @on-operator="onOperator"
        :show-table-batch-view="showTableBatchView"
    >
      <template v-slot:form>
        <el-form-item label="商品编码" prop="code">
          <el-input v-model="queryModel.code" placeholder="请输入" clearable/>
        </el-form-item>
        <el-form-item label="商品名称" prop="name">
          <el-input v-model="queryModel.name" placeholder="请输入" clearable/>
        </el-form-item>
        <el-form-item label="副名称" prop="subName">
          <el-input v-model="queryModel.subName" placeholder="请输入" clearable/>
        </el-form-item>
        <el-form-item label="规格代号" prop="specifications">
          <el-input v-model="queryModel.specifications" placeholder="请输入" clearable/>
        </el-form-item>
        <el-form-item label="型号" prop="model">
          <el-input v-model="queryModel.model" placeholder="请输入" clearable/>
        </el-form-item>
        <el-form-item label="品牌" prop="brand">
          <el-select v-model="queryModel.brand" placeholder="请选择" style="width:100%" clearable>
            <el-option
                v-for="item in dict.type.basic_data_goods_brand"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="商品分类" prop="goodsClassId">
          <el-select v-model="queryModel.goodsClassId" placeholder="请选择" style="width:100%" clearable>
            <el-option
                v-for="item in goodsClassOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"/>
          </el-select>
        </el-form-item>
        <el-form-item label="商品类别" prop="category">
          <el-select v-model="queryModel.category" placeholder="请选择" style="width:100%" clearable>
            <el-option
                v-for="item in dict.type.basic_data_goods_type"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="上架状态" prop="status">
          <el-select v-model="queryModel.status" placeholder="请选择" style="width:100%" clearable>
            <el-option
                v-for="item in dict.type.basic_data_goods_status"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="使用状态" prop="erpStatus">
          <el-select v-model="queryModel.erpStatus" placeholder="请选择" style="width:100%" clearable>
            <el-option
                v-for="item in dict.type.basic_data_customer_erp_status"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
          </el-select>
        </el-form-item> -->
        <el-form-item label="订货分类" prop="orderClassId">
          <el-select v-model="queryModel.orderClassId" placeholder="请选择" style="width:100%" clearable>
            <el-option
                v-for="item in orderClassOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"/>
          </el-select>
        </el-form-item>
        <el-form-item label="最低起运量" prop="minQuantity">
          <el-input v-model="queryModel.minQuantity" placeholder="请输入" clearable/>
        </el-form-item>
        <el-form-item label="是否是套包" prop="groupGoods">
          <el-select v-model="queryModel.groupGoods" placeholder="请选择" style="width:100%" clearable>
            <el-option label="是" :value="true"/>
            <el-option label="否" :value="false"/>
          </el-select>
        </el-form-item>
      </template>
    </query-table-render>
  </div>
</template>

<script>
import QueryTableRender from "@/components/QueryTableRender";
import { listGoods, listGoodsClassSelect, listOrderClassSelect } from "@/api/basic/commodity";
import {checkPermi} from '@/utils/permission.js'
// import {getOrderTerminalList} from "@/api/costManagement";
// import DialogCostEdit from "@/views/costManagement/components/DialogCostEdit";
import dayjs from "dayjs"

export default {
  name: "CommodityManage",
  components: {QueryTableRender},
  dicts:['basic_data_goods_type','basic_data_goods_status','basic_data_goods_brand','basic_data_customer_erp_status','goods_attribute'],
  data() {
    return {
      goodsClassOptions:[],
      orderClassOptions:[],
      queryModel: {
        code: '', // 商品编号
        name: '', // 商品名称
        subName: '', // 副名称
        specifications:'',//规格代号
        model:'',//型号
        goodsClassId: '', // 商品分类
        brand: '', // 品牌
        category: '', // 商品类别
        status: '', // 商品状态
        // erpStatus:'',// 使用状态
        orderClassId: '', // 订货分类
        minQuantity: '', // 最低起运量
        groupGoods:"",//是否是套包
      },
      showTableBatchView: false, // 是否显示批量视图
      tableColumns: [
        {
          width: '60',
          type: 'selection',
          align: 'center',
        },
        {
          label: '序号',
          width: '60',
          type: 'index',
          increment: true
        },
        {
          prop: 'code',
          label: '商品编码',
          minWidth: '120',
        },
        {
          prop: 'name',
          label: '商品名称',
          minWidth: '120',
          showOverflowTooltip:true
        },
        {
          prop: 'subName',
          label: '副名称',
          minWidth: '120',
          showOverflowTooltip:true
        },
        {
          prop: 'model',
          label: '型号',
          minWidth: '120',
        },
        {
          prop: 'specifications',
          label: '规格代号',
          minWidth: '150',
          showOverflowTooltip:true
        },
        {
          prop: 'packageSize',
          label: '包装规格',
          minWidth: '120',
          showOverflowTooltip:true
        },
        {
          prop: 'defaultUnitName',
          label: '默认单位',
          minWidth: '160',
          showOverflowTooltip:true
        },
        {
          prop: 'targetWeight',
          label: '目标重量',
          minWidth: '120',
        },
        {
          prop: 'temperature',
          label: '适用环境温度',
          minWidth: '120',
        },
        {
          prop: 'referencedNumber',
          label: '参图号',
          minWidth: '120',
        },
        {
          prop: 'attribute',
          label: '商品类型',
          width: '120',
          render: (h, text) => {
            let show = "";
            this.dict.type.goods_attribute.some((item) => {
              if (item.value === text) {
                show = item.label;
                return true;
              }
            });
            return show;
          }
        },
        {
          prop: 'releaseNotes',
          label: '设计备注',
          minWidth: '140',
          showOverflowTooltip:true
        },
        {
          prop: 'categoryName',
          label: '商品类别',
          // type: 'select',
          width: '120',
          // options: [
          //   {value: true, label: '启用', type: 'success'},
          //   {value: false, label: '禁用', type: 'danger'},
          // ]
        },
        {
          prop: 'goodsClassName',
          label: '商品分类',
          width: '140',
          showOverflowTooltip:true
        },
        {
          prop: 'brandName',
          label: '品牌',
          minWidth: '120',
        },
        {
          prop: 'orderClassName',
          label: '订货分类',
          minWidth: '140',
          showOverflowTooltip:true
        },
        {
          prop: 'minPackage',
          label: '最小发货数量',
          minWidth: '120',
          align: 'right',
        },
        {
          prop: 'minQuantity',
          label: '最低起运量',
          minWidth: '120',
          align: 'right',
        },
        {
          prop: 'statusName',
          label: '上架状态',
          // type: 'select',
          width: '120',
          // options: [
          //   {value: true, label: '启用', type: 'success'},
          //   {value: false, label: '禁用', type: 'danger'},
          // ],
          // render: (h,text, {selectOption}) => {
          //   return <el-tag type={selectOption.type}>{text}</el-tag>
          // }
        },
        {
          prop: 'erpStatus',
          label: '使用状态',
          type: 'select',
          width: '120',
          valueEnum: {
              '00': { text: '可用' },
              '01': { text: '禁用' },
              '02': { text: '反审核中' },
          }
        },
        {
          prop: 'groupGoods',
          label: '是否是套包',
          type: 'select',
          width: '120',
          valueEnum: {
              true: { text: '是' },
              false: { text: '否' },
          }
        },
        {
          prop: 'auxiliaryUnitName',
          label: '辅助单位',
          minWidth: '120',
          showOverflowTooltip:true
        },
        {
          prop: 'transferStandard',
          label: '辅助单位数量',
          minWidth: '120',
          showOverflowTooltip:true
        },
        {
          prop: 'remark',
          label: '备注',
          minWidth: '180',
          showOverflowTooltip:true
        },
        {
          label: '操作',
          width: '160',
          type: 'operator',
          fixed: 'right',
          operators: this.operatorsFunc()
          // [
          //   {label: '修改', command: 'edit'},
          //   {label: '详情', command: 'check'},
          // ]
        },
      ],
      editVisible: false,
      curRecord: null,
      customerValue: [], //  价目数据
      customerData: [],
    }
  },
  watch: {
    $route() {
        // location.reload();
        this.onRefreshTable();
    },
  },
  mounted(){
    this.getClassList()
  },
  methods: {
    //操作按钮
    toolbarRnd(h){
      // return <el-button type="primary" icon="el-icon-download" vOn:click={() => this.handleExport()}>导出</el-button>
      let list = [];
      if (checkPermi(['basic-data:goods:export'])) {
        list.push(<el-button type="primary" icon="el-icon-download" size="small" vOn:click={() => this.handleExport()}>导出</el-button>);
      }
      return list;
    },
    /**
     * 操作列表
     */
    operatorsFunc() {
      let list = [];
      if (checkPermi(['basic-data:goods:update'])) {
        list.push({label: '修改', command: 'edit'});
      }
      if(checkPermi(['basic-data:goods:detail'])){
        list.push({label: '详情', command: 'check', })
      }
      return list;
    },
    titleRender(h) {
      return <div>
        <span style="display:inline-block; background-color: #1890FF;margin-bottom: -2px; margin-right: 8px; width: 3px; height: 14px"></span>
        <span style="display: inline-block; color: #333333; font-size: 16px;">商品管理</span>
      </div>;
    },
    transformQuery(queryData) {
      let transParams = {}
      for (let keyName in queryData) {
        if (queryData.hasOwnProperty(keyName)) {
          if (keyName === 'createTimeRange') {
            if(queryData['createTimeRange'] && queryData['createTimeRange'].length){
              const [start, end] =  queryData[keyName]
              transParams['startTime'] = dayjs(start).startOf('day').format("YYYY-MM-DD HH:mm:ss")
              transParams['endTime'] = dayjs(end).endOf('day').format("YYYY-MM-DD HH:mm:ss")
            }
          } else {
            transParams[keyName] = queryData[keyName]
          }
        }
      }
      return transParams
    },
    onOperator(command, record) {
      if('edit' === command){
        this.onPreviewInvoice(record)
      }else if('check' === command){
        this.checkInfo(record)
      }
    },
    //编辑
    onPreviewInvoice(record) {
      console.log(record)
      this.$router.push({path:"CommodityManageEdit",query:{goodsId:JSON.stringify(record.id)}});
    },
    //详情
    checkInfo(record) {
      this.$router.push({path:"CommodityManageDetail",query:{goodsId:JSON.stringify(record.id)}});
    },
    filterCustomerData(query, item) {
      return item.pinyin.indexOf(query) > -1;
    },
    /** 确认选择关联客户 */
    submitSelectCustomer() {
      this.editVisible = false;
    },

    /** 获取商品列表 */
    requestTableData(queryParams) {
      return listGoods(queryParams).then(respData => {
          return {
            success: true,
            total: respData.data.total,
            data: respData.data.records,
          }
        }
      );
    },
    /** 获取商品分类、订货分类 */
    getClassList() {
      listGoodsClassSelect().then(response => {
          this.goodsClassOptions = response.data
      });
      listOrderClassSelect().then(response => {
          this.orderClassOptions = response.data
      });
        
    },
    onRefreshTable(){
      this.$refs['queryTable'].refreshTable()
    },
    handleExport(){
      let queryParams = JSON.parse(JSON.stringify(this.queryModel));
      const selectedList = this.$refs['queryTable'].getSelection();
      let list = [];
      if (selectedList && selectedList.length > 0) {
        list = selectedList.map(item => {
          return item.id
        });
        queryParams = {
          ids:list
        }
      }
      console.log('list=', list);

      this.downloadFile('/basic/data/goods/export', {
        ...queryParams
      }, `商品管理.xlsx`)
    }
  }
}
</script>
<style lang="css"> 
/* .el-tooltip__popper{ max-width:30% }  */
</style>